<template>
	<view class="page-c">
		<!-- 顶部 -->
		<view>
			<view class="tn-strip-bottom">
				<view class="slideshow">
					<view class="slideshow-image"
						style="background-image: url('http://gyh7790.oss-cn-beijing.aliyuncs.com/buerkeji/mp/20241118/33740bae5ce04b5b8fa98d1f68dad452.png')">
					</view>
					<view class="slideshow-image"
						style="background-image: url('http://gyh7790.oss-cn-beijing.aliyuncs.com/buerkeji/mp/20241118/323bfa06349a494aa345648ed0fd74e0.png')">
					</view>
				</view>
				<view class="beibei">
					<view class="beibei2"
						style="background-image: url('http://gyh7790.oss-cn-beijing.aliyuncs.com/buerkeji/mp/20241118/33740bae5ce04b5b8fa98d1f68dad452.png')">
					</view>
				</view>
				<view class='tn-margin tn-padding-top-sm'>
					<view class="tn-text-bold">
						<text class='tn-text-xl-xxl tn-padding-right'>奖励计划</text>
						<text class='tn-text-lg tn-color-gray'>分享文章，轻松赚佣</text>
					</view>
					<!-- <view class="tn-margin-top-lg" @click="copyWechat">
            <text class="tn-text-lg">微信客服：tnkewo</text>
            <text class="tn-icon-copy tn-color-blue tn-padding-left-xs"></text>
          </view> -->
					<!-- <view class="tn-margin-top-xs" @click="callPhoneNumber" data-number="13699996666">
            <text class="tn-text-lg">电话：13699996666</text>
            <text class="tn-icon-phone tn-color-orange tn-padding-left-xs"></text>
          </view> -->
				</view>
			</view>





			<view class="king-list tn-margin-top-sm">

				<view class="king-icon">
					<text class='tn-icon-creative tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
					<text class='tn-text-xl tn-margin-left'>活动规则</text>
				</view>
				<view class='king-item tn-color-red tn-icon-circle-fill'>
					<view class="resume2">
						<text class="">
							用户可以通过点击文章页面内的分享按钮，将文章分享至微信好友、微信群、微信朋友圈、QQ、QQ 空间、微博等社交平台
						</text>
					</view>

				</view>

				<view class="king-icon">
					<text class='tn-icon-company tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
					<text class='tn-text-xl tn-margin-left'>奖励机制</text>
				</view>
				<view class='king-item tn-color-red tn-icon-circle-fill'>
					<view>
						<view class="resume2">
							<text>1、当其他用户通过分享者分享的链接首次访问文章时，视为一次有效分享。</text>
						</view>
						<view class="resume2">
							<text>2、如果通过分享的文章的用户进行了文章阅读，分享者将获得 [1-100] 元的返佣奖励。</text>
						</view>
						<view class="resume2">
							<text>3、若新用户继续分享文章并成功带来新的用户和消费，原始分享者可获得该新用户分享所产生返佣的 [10%]
								作为间接奖励，形成多层级奖励体系，激励更多用户积极分享。</text>
						</view>
					</view>
				</view>

				<view class="king-icon">
					<text class='tn-icon-trophy tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
					<text class='tn-text-xl tn-margin-left'>结算与提现</text>
				</view>
				<view class='king-item tn-color-red tn-icon-circle-fill'>
					<view>
						<view class="resume2">
							<text>平台将在每周五、六对上周的返佣奖励进行结算</text>
						</view>
					</view>
				</view>

				<view class="king-icon">
					<text class='tn-icon-trophy tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
					<text class='tn-text-xl tn-margin-left'>注意事项</text>
				</view>
				<view class='king-item tn-color-red tn-icon-circle-fill'>
					<view>
						<view class="resume2">
							<text>1、严禁通过任何不正当手段刷分享量或新用户注册，如使用机器刷量、虚假账号等。一旦发现，平台将取消其参与资格，并追回已发放的奖励，情节严重者将依法追究责任。</text>
						</view>
						<view class="resume2">
							<text>2、平台有权根据活动实际执行情况对活动规则和奖励计划进行调整，但会提前通知用户。</text>
						</view>
						<view class="resume2">
							<text>3、本次活动的最终解释权归本平台所有。</text>
						</view>
					</view>
				</view>

				<view class="king-icon">
					<text class='tn-icon-trophy tn-color-white tn-text-lg tn-bg-blue tn-round tn-padding-xs'></text>
					<text class='tn-text-xl tn-margin-left'>联系我们</text>
				</view>
				<view class='king-item tn-color-red tn-icon-circle-fill'>
					<view>
						<view class="resume2">
							<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
								<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
									<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
										style="color: #7C8191;">
										<view class="tn-icon-wechat-fill"></view>
									</view>
									<view class="tn-flex tn-flex-row-between" style="width: 100%;">
										<view class="tn-margin-left-sm">点击联系</view>
										<view class="tn-color-gray tn-icon-right"></view>
									</view>
								</button>
							</tn-list-cell>
						</view>
					</view>
				</view>


			</view>


			<view class="tn-margin-top tn-padding-top-sm tn-margin-bottom">
				<view class="see">

					<view class="justify-content-item tn-flex tn-flex-col-center">
						<view style="margin-right: 10rpx;margin-left: 30rpx;">
							<tn-avatar-group :lists="groupList" size="sm"></tn-avatar-group>
						</view>
					</view>
					<view class="tn-margin-right">
						<text class='tn-color-grey tn-text-df tn-margin-right-sm'>12.9W 查看 </text>
						<text class='tn-color-grey tn-text-df'> 3.2K 分享</text>
					</view>

				</view>
			</view>

			<!-- <view class="action cf" bindtap="showModal" data-target="bottomModal">
        <image src='/static/images/admin.jpg' class='edit' mode='aspectFit'></image>
      </view> -->
			<!-- <button class='' open-type="contact">
        <image src='/static/images/admin.jpg' class='share-img png round shadow-lg bg-white' mode='aspectFit'>
        </image>
      </button> -->
		</view>


		<!-- 悬浮按钮-->
		<!-- <view class="tn-flex tn-flex-row-between tn-footerfixed">
      <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
        <tn-button backgroundColor="#3668fc" padding="40rpx 0" width="90%" shadow>
          <text class="tn-icon-edit-form tn-padding-right-xs tn-color-white"></text>
          <text class="tn-color-white">编 辑</text>
        </tn-button>
      </view>
      <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
        <tn-button backgroundColor="#fbbd12" padding="40rpx 0" width="90%" shadow open-type="share">
          <text class="tn-icon-share-triangle tn-padding-right-xs tn-color-white"></text>
          <text class="tn-color-white">分 享</text>
        </tn-button>
      </view>
    </view> -->

		<view class="">
			<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-1"
				@click="tn('/pageA/create/create')">
				<view class="tn-icon-honor-fill tn-color-white"></view>
			</view>
			<view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur button-2">
				<button class="tn-button--clear-style" open-type="share" style="border-radius: 0;">
					<view class="tn-icon-send-fill tn-color-white"></view>
				</button>
				<view class="tn-icon-send-fill tn-color-white"></view>
			</view>
		</view>


		<view class='tn-tabbar-height'></view>

		<view class="bg-tabbar-shadow"></view>

	</view>
</template>

<script>
	export default {
		name: 'PagesC',
		data() {
			return {
				tagList: [{
						color: 'red',
						title: "萌新求带",
					},
					{
						color: 'cyan',
						title: "简约美",
					},
					{
						color: 'blue',
						title: "开心吃货",
					},
					{
						color: 'green',
						title: "爱花草",
					},
					{
						color: 'orange',
						title: "产品经理",
					},
					{
						color: 'purplered',
						title: "健身女王",
					},
					{
						color: 'purple',
						title: "创意设计",
					},
					{
						color: 'brown',
						title: "腹黑",
					},
					{
						color: 'yellowgreen',
						title: "水果控",
					},
					{
						color: 'lime',
						title: "bug多多",
					},
					{
						color: 'grey',
						title: "蠢萌蠢萌",
					}
				],
				groupList: [{
						src: 'http://gyh7790.oss-cn-beijing.aliyuncs.com/buerkeji/mp/20241118/7539ffcb1879421cae85aeb7eed1b380.jpg'
					},
					{
						src: 'http://gyh7790.oss-cn-beijing.aliyuncs.com/buerkeji/mp/20241118/7539ffcb1879421cae85aeb7eed1b380.jpg'
					},
					{
						src: 'http://gyh7790.oss-cn-beijing.aliyuncs.com/buerkeji/mp/20241118/7539ffcb1879421cae85aeb7eed1b380.jpg'
					},
					{
						src: 'http://gyh7790.oss-cn-beijing.aliyuncs.com/buerkeji/mp/20241118/91fb6bc61c9f45778d207dfb8649d27e.jpg'
					},
					{
						src: 'https://resource.tuniaokj.com/images/blogger/blogger_beibei.jpg'
					},
				]
			}
		},

		onReady() {

		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: "13699996666",
				});
			},
			// 复制开源地址
			copyWechat() {
				wx.vibrateShort();
				uni.setClipboardData({
					data: "tnkewo",
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page-c {
		max-height: 100vh;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	/* 底部tabbar假阴影 start*/
	.bg-tabbar-shadow {
		// background-image: repeating-linear-gradient(to top, rgba(0,0,0,0.1) 10rpx, rgba(255,255,255,0) , rgba(255,255,255,0));
		box-shadow: 0rpx 0rpx 400rpx 0rpx rgba(0, 0, 0, 0.25);
		position: fixed;
		bottom: calc(0rpx + env(safe-area-inset-bottom) / 2);
		bottom: calc(0rpx + constant(safe-area-inset-bottom));
		height: 60rpx;
		width: 100vw;
		z-index: 0;
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(180rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 按钮 */
	.button-1 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		bottom: 27%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	.button-2 {
		background-color: rgba(0, 0, 0, 0.15);
		position: fixed;
		/* bottom:200rpx;
      right: 20rpx; */
		bottom: 18%;
		right: 30rpx;
		z-index: 1001;
		border-radius: 100px;
	}

	/* 图标容器15 start */
	.icon15 {
		&__item {
			width: 30%;

			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;


				}
			}
		}
	}

	/* 主图固定 */
	.beibei {
		width: 100%;
		height: 1000upx;
	}

	.beibei2 {
		background-repeat: no-repeat;
		background-size: 100% 100%;
		height: 100%;
		width: 100%;
		position: relative;
		background-position: center center;
		background-size: cover;
	}

	/* 相册 */
	.slideshow {
		top: 0;
		position: absolute;
		width: 100vw;
		height: 1000upx;
		overflow: hidden;
	}

	.slideshow-image {
		position: absolute;
		width: 100%;
		height: 100%;
		background: no-repeat 50% 50%;
		background-size: cover;
		-webkit-animation-name: kenburns;
		animation-name: kenburns;
		-webkit-animation-timing-function: linear;
		animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-duration: 16s;
		animation-duration: 16s;
		opacity: 1;
		transform: scale(1.2);
	}

	.slideshow-image:nth-child(1) {
		-webkit-animation-name: kenburns-1;
		animation-name: kenburns-1;
		z-index: 3;
	}

	.slideshow-image:nth-child(2) {
		-webkit-animation-name: kenburns-2;
		animation-name: kenburns-2;
		z-index: 2;
	}

	.slideshow-image:nth-child(3) {
		-webkit-animation-name: kenburns-3;
		animation-name: kenburns-3;
		z-index: 1;
	}

	.slideshow-image:nth-child(4) {
		-webkit-animation-name: kenburns-4;
		animation-name: kenburns-4;
		z-index: 0;
	}

	@-webkit-keyframes kenburns-1 {
		0% {
			opacity: 1;
			transform: scale(1.2);
		}

		1.5625% {
			opacity: 1;
		}

		23.4375% {
			opacity: 1;
		}

		26.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}

		98.4375% {
			opacity: 0;
			transform: scale(1.2117647059);
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes kenburns-1 {
		0% {
			opacity: 1;
			transform: scale(1.2);
		}

		1.5625% {
			opacity: 1;
		}

		23.4375% {
			opacity: 1;
		}

		26.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}

		98.4375% {
			opacity: 0;
			transform: scale(1.2117647059);
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes kenburns-2 {
		23.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		26.5625% {
			opacity: 1;
		}

		48.4375% {
			opacity: 1;
		}

		51.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@keyframes kenburns-2 {
		23.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		26.5625% {
			opacity: 1;
		}

		48.4375% {
			opacity: 1;
		}

		51.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@-webkit-keyframes kenburns-3 {
		48.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		51.5625% {
			opacity: 1;
		}

		73.4375% {
			opacity: 1;
		}

		76.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@keyframes kenburns-3 {
		48.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		51.5625% {
			opacity: 1;
		}

		73.4375% {
			opacity: 1;
		}

		76.5625% {
			opacity: 0;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.2);
		}
	}

	@-webkit-keyframes kenburns-4 {
		73.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		76.5625% {
			opacity: 1;
		}

		98.4375% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: scale(1);
		}
	}

	@keyframes kenburns-4 {
		73.4375% {
			opacity: 1;
			transform: scale(1.2);
		}

		76.5625% {
			opacity: 1;
		}

		98.4375% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: scale(1);
		}
	}


	/* 简历内容 */
	.king-list {
		display: block;
		// background-color: #ffffff;
	}

	.king-list .king-icon {
		width: 100%;
		text-align: left;
		padding: 20rpx 0 20rpx 37rpx;
		font-size: 26rpx;
		color: #888;
		display: block;
	}

	.king-list>.king-item {
		padding: 30rpx 30rpx 30rpx 120rpx;
		position: relative;
		display: block;
		z-index: 0;
	}

	.king-list>.king-item::after {
		content: "";
		display: block;
		position: absolute;
		width: 1rpx;
		background-color: #E6E6E6;
		left: 60rpx;
		height: 100%;
		top: 0;
		z-index: 8;
	}

	.king-list>.king-item::before {
		display: block;
		position: absolute;
		top: 36rpx;
		z-index: 9;
		background-color: #ffffff;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		border: none;
		line-height: 50rpx;
		left: 36rpx;
	}


	/* 名片微调 */
	.img-solid {
		border: 1rpx solid #eee;
	}

	.share-img {
		position: fixed;
		/* padding: 10rpx; */
		width: 100rpx;
		height: 100rpx;
		/* top: 680rpx; */
		bottom: 200rpx;
		right: 20rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none;
		border: 6rpx solid rgba(255, 255, 255, 0);
	}

	.resume {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}

	.resume+.resume {
		margin-top: 20rpx;
	}

	.resume2 {
		padding-top: 10rpx;
		border-radius: 6rpx;
		display: block;
		color: #666;
		line-height: 1.6;
		text-align: justify;
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	.bg-img-cont {
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		height: 350rpx;
		margin: 20rpx 0;
		border-radius: 8rpx;
	}



	// .button-no {
	//   border: none;
	//   width: 100%;
	//   height: 100%;
	//   background-color: rgba(0, 0, 0, 0);
	// }


	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 0rpx 20rpx 25rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 标签内容 end*/

	.see {
		display: flex;
		justify-content: space-between;
		padding-top: 10rpx;
		border-radius: 6rpx;
		color: #666;
		line-height: 1.6;
	}
</style>
